<template>
	<el-popover v-model:visible="visible" placement="bottom-start" :width="430">
		<template #reference>
			<div @click="changeVisible" class="result">
				<div>{{result}}</div>
				<div>
					<el-icon-arrowdown :class="{ 'rotate': visible }"></el-icon-arrowdown>
				</div>
			</div>
		</template>

		<div class="container">
			<el-row>
				<el-col :span="12">
					<el-radio v-model="radioVal" label="1">按城市</el-radio>
					<el-radio v-model="radioVal" label="2">按省份</el-radio>
				</el-col>
				<el-col :span="12">
					<el-select @change="changeSelect" :filter-method="filterMethod" filterable placeholder="请搜索城市" v-model="selectValue">
						<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-col>
			</el-row>

			<template v-if="radioVal === '1'">
				<div class="city">
					<!-- <div v-for="(value, key) in cities">{{key}}</div> -->
					<div @click="clickChat(item)" class="city-item" v-for="(item, index) in Object.keys(cities)">
						{{item}}
					</div>
				</div>
				<el-scrollbar max-height="300px">
					<template v-for="(value, key) in cities" :key="key">
						<el-row :id="key" style="margin-bottom: 10px;">
							<el-col :span="2">{{key +':'}}</el-col>
							<el-col class="city-name" :span="22">
								<div @click="clickItem(item)" class="city-name-item" v-for="item in value"
									:key="item.id">
									{{item.name}}
								</div>
							</el-col>
						</el-row>
					</template>
				</el-scrollbar>
			</template>
			<template v-else>
				<div class="province">
					<div @click="clickChat(item)" class="province-item" v-for="(item, index) in Object.keys(provinces)" :key="index">{{item}}
					</div>
				</div>

				<el-scrollbar max-height="300px">
					<template v-for="(item, index) in Object.values(provinces)" :key="index">
						<template v-for="(item1, index1) in item" :key="index1">
							<el-row :id="item1.id" style="margin-bottom: 10px;">
								<el-col :span="4">{{item1.name + ':'}}</el-col>
								<el-col class="province-name" :span="20">
									<div @click="clickProvince(item2)" class="province-name-item"
										v-for="(item2, index2) in item1.data" :key="index2">
										{{item2}}
									</div>
								</el-col>
							</el-row>
						</template>
					</template>
				</el-scrollbar>
			</template>
		</div>
	</el-popover>
</template>

<script lang='ts' setup name="chooseCity">
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import city from '../lib/city.ts'
	import province from '../lib/province.json'

	let result = ref('请选择')
	let visible = ref(false)
	let radioVal = ref('1') // 1:按城市；2 按省份
	let selectValue = ref('')
	let cities = ref(city.cities)
	let provinces = ref(province)
	let options = ref([])
	let searchVal = ref('')
	let allCity = ref([])

	let changeVisible = () => {
		visible.value = !visible.value
		
		if(radioVal.value === '1') {
			emits('changeCity', item)
		} else {
			emits('changeProvince', item)
		}
	}

	let clickItem = item => {
		result.value = item.name
		visible.value = false
		emits('changeCity', item)
	}

	let clickChat = item => {
		let el = document.querySelector(`#${item}`)
		if (el) {
			el.scrollIntoView()
		}
	}
	
	let clickProvince = item => {
		result.value = item
		visible.value = false
		emits('changeProvince', item)
	}
	
	let filterMethod = val => {
		searchVal.value = val
		
		let values = Object.values(cities.value).flat(2)
		if(val === '') {
			options.value = values
		} else {
			if(radioVal.value === '1') {
				// 按城市，中文和拼音一起过滤
				options.value = values.filter(item => {
					return item.name.includes(val) || item.spell.includes(val)
				})
			} else {
				// 按省份，过滤中文
				options.value = values.filter(item => {
					return item.name.includes(val)
				})
			}
		}
	}
	
	let changeSelect = val => {
		let city = allCity.value.find(item => item.id === val)
		result.value = city.name
		visible.value = false
	}

	let emits = defineEmits(['changeCity', 'changeProvince'])
	
	onMounted(() => {
		let values = Object.values(cities.value).flat(2)
		options.value = values
		allCity.value = values
	})
	
	watch(() => visible.value, () => {
		selectValue.value = ''
	})
</script>

<style lang='scss' scoped>
	.result {
		display: flex;
		align-items: center;
		width: fit-content;
		cursor: pointer;
	}

	.rotate {
		transform: rotate(180deg);
	}

	svg {
		transition: all 0.25s linear;
	}

	.container {
		padding: 10px;
	}

	.province,
	.city {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 10px;

		&-item {
			padding: 3px 6px;
			margin-right: 8px;
			border: 1px solid #eee;
			margin-bottom: 10px;
			cursor: pointer;
		}
	}

	.province-name,
	.city-name {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		cursor: pointer;

		.province-name-item,
		.city-name-item {
			margin-right: 6px;
			margin-bottom: 6px;
		}
	}
</style>
